<template>
	<view :data-theme="theme" class="container">
		<!-- 商品信息（封面加轮播图） -->
		<view class="card" style="margin-top: 40rpx;padding: 10px 10px 0px;">
			<view class="product-title">基础信息</view>
			<view style="display: flex;flex-flow: row wrap;">
				<u-upload style="flex: none;" :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1"
					:maxCount="1" uploadText="物资图片"></u-upload>
				<!-- <u-upload style="flex: none;" :fileList="fileList2" @afterRead="afterRead" @delete="deletePic" name="2"
					multiple :maxCount="9" uploadText="轮播图"></u-upload> -->
			</view>
			<view>
				<u--form labelPosition="left" :model="formModel" :rules="rules" ref="uForm">
					<u-form-item label="物资名称" prop="productDetail.name" required labelWidth="80" ref="item1">
						<u--input v-model="formModel.productDetail.name" :disabled="type !== ''" :disabledColor="'#fff'"
							:color="(type !== '' ? '#ccc' : '#000')" placeholder="请输入" border="none"></u--input>
					</u-form-item>
					<u-form-item label="物资类型" required prop="productDetail.largeCategoryCode" 
						 labelWidth="80" ref="item1">
						<u--input v-model="largeCategoryName" placeholder="请选择" :disabled="true"
							disabledColor="#fff" :color="(type !== '' ? '#ccc' : '#000')" border="none"></u--input>
						<text v-if="type == ''" class='iconfont icon-xiangyou' @click="openCategoryClass(1)"></text>
					</u-form-item>
					<u-form-item label="物资规格" @click="type !== ''?null:openSpecifications(1)" required
						prop="productDetail.materialsSpecId" labelWidth="80" ref="item1">
						<u--input v-model="materialsSpecName" placeholder="请选择" :disabled="true"
							disabledColor="#fff" :color="(type !== '' ? '#ccc' : '#000')" border="none"></u--input>
						<text v-if="type == ''" class='iconfont icon-xiangyou' @click="openSpecifications(1)"></text>
					</u-form-item>
					<u-form-item label="物资单位" required prop="productDetail.materialUnit" labelWidth="80" ref="item1">
						<u--input v-model="materialsUnitName" placeholder="请选择" :disabled="true"
							disabledColor="#fff" :color="(type !== '' ? '#ccc' : '#000')" border="none"></u--input>
						<text v-if="type == ''" class='iconfont icon-xiangyou' @click="openMaterialUnit(1)"></text>
					</u-form-item>
					<u-form-item label="物资总数" required prop="productDetail.materialTotal" labelWidth="80" ref="item1">
						<u--input v-model="formModel.productDetail.materialTotal" placeholder="请输入物资总数"
							:disabled="type != ''" disabledColor="#fff" :color="(type !== '' ? '#ccc' : '#000')"
							border="none"></u--input>
					</u-form-item>
					<u-form-item label="单品价格(元)" required prop="productDetail.materialPrice" labelWidth="80" ref="item1">
						<u--input v-model="formModel.productDetail.materialPrice" placeholder="请输入物资价格"
							:disabled="type != ''" disabledColor="#fff" :color="(type !== '' ? '#ccc' : '#000')"
							border="none"></u--input>
					</u-form-item>
				</u--form>
			</view>
		</view>

		<!-- 商品详情（图） -->
		<view style="height: 200rpx;"></view>

		<view style="position: fixed;bottom: 0px;width: 100%;padding: 10px;background-color: #FFF;z-index: 999;">
			<button class="bg_color"
				style="font-weight: bold;border-radius: 10px;padding: 20rpx;color: #fff;" :loading="loading"
				@click="submitProduct">提交</button>
		</view>
		<!-- 组件部分------- -->
		<u-toast ref="uToast"></u-toast>

		<!-- 商品类别 -->
		<tui-drawer mode="bottom" :visible="showGroupCategory" @close="showGroupCategory = false">
			<view class="u-demo-block2 ensure">
				<view class="titleRight">选择物资类型<text @click="close" class="iconfont icon-guanbi5"></text></view>
				<view style="margin: 10px 0 10px 0">
					<radio-group v-model="categoryValue1" @change="radioChange">
						<label
							style="display: flex;flex-direction: row;margin: 20rpx;border-bottom: 1px solid #eee;padding: 20rpx 0;"
							v-for="(item, index) in largeCategoryData" :key="index">
							<view>
								<radio :value="item.type" />
							</view>
							<view style="line-height: 19px;">{{item.name}}</view>
						</label>
					</radio-group>
				</view>
			</view>
			<view style="height: 120rpx;">

			</view>
		</tui-drawer>

		<tui-drawer mode="bottom" :visible="showGroupSpec" @close="showGroupSpec = false">
			<view class="u-demo-block2 ensure">
				<view class="titleRight">选择物资规格<text @click="close" class="iconfont icon-guanbi5"></text></view>
				<view style="margin: 10px 0 10px 0">
					<scroll-view class="secondary" scroll-y>
						<!-- 内容区域 -->
						<radio-group v-model="specValue1" @change="specRadioChange">
							<label
								style="display: flex;flex-direction: row;margin: 20rpx;border-bottom: 1px solid #eee;padding: 20rpx 0;"
								v-for="(item, index) in largeSpecData" :key="index">
								<view>
									<radio :value="item.id.toString()" />
								</view>
								<view style="line-height: 19px;">{{item.specificationsName}}</view>
							</label>
						</radio-group>
					</scroll-view>
				</view>
				<view style="display: flex;align-items: center;text-align: center;justify-content: center;"><span
						@click="goMenually('spec')">没有?
						手动创建</span></view>
			</view>
			<!-- 	<view style="height: 120rpx;">

			</view> -->
		</tui-drawer>

		<tui-drawer mode="bottom" :visible="showGroupUnit3" @close="showGroupUnit3 = false">
			<view class="u-demo-block2 ensure">
				<view class="titleRight">选择物资单位<text @click="close" class="iconfont icon-guanbi5"></text></view>
				<view style="margin: 10px 0 10px 0">
					<scroll-view class="secondary" scroll-y>
						<!-- 内容区域 -->
						<view class="sku-select">
							<view class="uni-flex uni-row" style="-webkit-flex-wrap: wrap;flex-wrap: wrap;">
								<view class="flex-text"
									:class='item.unitTypeName == formModel.productDetail.materialUnit? "right-class-active" :""'
									v-for="(item,index) in unitGoodsList" :key="index" @click='tapAttr(item)'>
									{{item.unitTypeName}}
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view style="display: flex;align-items: center;text-align: center;justify-content: center;"><span
						@click="goMenually('unit')">没有?
						手动创建</span></view>
			</view>
			<!-- <view style="height: 120rpx;"></view> -->
		</tui-drawer>

	</view>
</template>

<script>
	import {
		brandlistApi,
	} from '@/api/category.js';
	import {
		shippingTemplatesList
	} from '@/api/logistics.js';
	import {
		productUpdateApi,
		productCreateApi,
		categoryApi,
		productGuaranteeApi,
		productDetailApi,
		removeProductApi,
		getProductLargeApi
	} from '@/api/product.js';
	import {
		getSpecListApi,
		getUnitListApi
	} from '@/api/merchant.js';
	import animationType from '@/utils/animationType.js'
	import {
		setThemeColor
	} from '@/utils/setTheme.js'
	import tuiDrawer from '@/components/tui-drawer/index.vue';
	import image from '../../../uni_modules/uview-ui/libs/config/props/image';
	let app = getApp();
	let _this = undefined;
	export default {
		components: {
			tuiDrawer,
		},
		data() {
			return {
				bgColor: "#ffffff",
				theme: app.globalData.theme,
				titleSingle: '多规格商品请前往电脑端进行小规格的添加，删除操作',
				id: 0, //商品ID
				type: '', // 修改?添加类型
				attrKey: "规格", //默认的规格key名称
				specParamMap: {}, //规格参数
				sliderImages: [], //轮播图列表
				productCredentials: [], //资质图片
				skuArr: [], //商品规格
				fileList1: [
					// {
					// 	url:"https://p3.ssl.qhimg.com/t0137f6f23e234057d6.webp",
					// }
				], //商品封面图
				fileList2: [
					// {
					// 	url:"https://p4.ssl.qhimg.com/dr/90_0_85/t01ef6a992a4e4ce63c.webp",
					// }
				], //商品轮播图
				keywords: [], //关键词列表
				guaranteeItems: [], //选择的保障服务对象列表

				productGuaranteeList: [], //所有保障服务

				selectTemplatesIndex: null, //选择的运费模板
				shippingTemplatesList: [], //所有运费模板

				categoryTree: [], //平台商品分类树
				citygoryTree: [], //城市缓存树
				formModel: {
					productDetail: {
						image: "", //商品图片
						sliderImage: "", //轮播图
						cateId: "0", //商户商品分类id
						attr: [], //商品属性ProductAttrAddRequest
						attrValue: [], //商品属性详情

						name: "", //物资名称
						// intro: "", //商品简介
						// brandId: "", //品牌
						categoryId: "", //平台商品分类id

						specParam: "", //规格参数
						largeCategoryCode: "", //商品类别

						specType: true, //多规格
						materialTotal: '', //物资总数
						materialPrice: '', //物资价格
						materialsSpecId: '', //库存规格
						materialUnit: '', //物资单位
					
					}, //商品详情
				},
				rules: {
					'productDetail.name': {
						type: 'string',
						required: true,
						message: '请填写物资名称',
						trigger: ['blur', 'change']
					},
					'productDetail.largeCategoryCode': {
						type: 'string',
						required: true,
						message: '请选择物资类别',
						trigger: ['blur', 'change']
					},
					'productDetail.categoryId': {
						type: 'number',
						required: true,
						message: '请选择商品分类',
						trigger: ['blur', 'change']
					},
					'productDetail.brandId': {
						type: 'number',
						required: true,
						message: '请填写商品品牌',
						trigger: ['blur', 'change']
					},
					'productDetail.materialPrice': {
						type: 'string',
						required: true,
						message: '请填写物资价格',
						trigger: ['blur', 'change']
					},
					'productDetail.materialsSpecId': {
						type: 'string',
						required: true,
						message: '请填写物资规格',
						trigger: ['blur', 'change']
					},
					'productDetail.materialUnit': {
						type: 'string',
						required: true,
						message: '请填写物资单位',
						trigger: ['blur', 'change']
					},
					'productDetail.materialTotal': {
						type: 'string',
						required: true,
						message: '请填写物资总数',
						trigger: ['blur', 'change']
					},
					// 'productDetail.unitName': {
					// 	type: 'string',
					// 	required: true,
					// 	message: '请填写商品单位',
					// 	trigger: ['blur', 'change']
					// },

				},
				//---组件
				addParamDrawer: {
					show: false, //弹窗显隐
					title: '添加关键字', //title
					type: 1, //类型
					name: '', //名称
					value: '', //值
				},
				// brandName: '',
				brandData: [], //品牌列表
				categoryname: '', //分类名称，
				deleteData: [], //删除的小sku
				rawSkuArr: [], //原始数据
				isShowAttr: true,
				productInfoParam: null, //深拷贝详细信息数据
				inputValid1: false,
				inputValid2: false,
				inputValid3: false,
				inputValid4: false,
				loading: false,
				// --------商品大类--------
				largeCategoryData: [{
					name: '押金型',
					type: '1',
				}, {
					name: '通用型',
					type: '2',
				}],
				largeCategoryName: '',
				showGroupCategory: false, //商品大类弹窗
				categoryValue1: '',
				// ---------物资规格-------
				sepcForm: {
					limit: 100,
					page: 1,
					name: '',
					state:0,
				},
				showGroupSpec: false,
				largeSpecData: [],
				specValue1: '',
				materialsSpecName: '',
				// ---------物资单位--------
				unitForm:{
					limit: 100,
					page: 1,
					name: '',
					state:0,
				},
				unitGoodsList: [],
				showGroupUnit3: false,
				materialsUnitName: '',
			};
		},
		async onLoad(options) {
			this.bgColor = setThemeColor();
			console.log('options', options)
			this.bgColor = setThemeColor()
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
			// 初始化表单选项数据
			// 分类，品牌，保障服务，运费模板等
			// 加载保障服务，
			uni.showLoading({
				title: '加载中',
				mask: true
			});
			
			uni.hideLoading();
			
			this.getSpecList();
			this.getUnitList();
		},
		
		methods: {
		
			radioChange(n) {
				let radioValue = n.detail.value;
				this.categoryValue1 = radioValue;
				this.formModel.productDetail.largeCategoryCode = radioValue;
				for (let i = 0; i < this.largeCategoryData.length; i++) {
					if (this.largeCategoryData[i].type == radioValue) {
						this.largeCategoryName = this.largeCategoryData[i].name
					}
				};
				this.close();
			},

			// 物资规格
			openSpecifications() {
				this.showGroupSpec = true;
			},
			getSpecList() {
				getSpecListApi(this.sepcForm).then((res) => {
					this.largeSpecData = res.data.list;
				})
			},
			specRadioChange(n) {
				let radioValue = n.detail.value;
				this.specValue1 = radioValue;
				this.formModel.productDetail.materialsSpecId = radioValue;
				for (let i = 0; i < this.largeSpecData.length; i++) {
					if (this.largeSpecData[i].id == radioValue) {
						this.materialsSpecName = this.largeSpecData[i].specificationsName
					}
				};
				this.close();
			},

			/** 物资规格单位--列表 */
			getUnitList() {
				getUnitListApi(this.unitForm).then((res) => {
					console.log(res);
					this.unitGoodsList = res.data.list;
				})
			},
			openMaterialUnit() {
				this.showGroupUnit3 = true;

			},

			/** 弹窗关闭 */
			close() {
				this.showGroupUnit3 = false;
				this.showGroupSpec = false;
				this.showGroupCategory = false;
			},
			/** 单位选择 */
			tapAttr(skuItem) {
				console.log(skuItem)
				this.materialsUnitName = skuItem.unitTypeName;
				// this.$set(this.form1.productAttr.specUnit, 'sellUnit', skuItem.name)
				this.$set(this, 'materialsUnitName', skuItem.unitTypeName);
				this.$set(this.formModel.productDetail,'materialUnit',skuItem.unitTypeName);
				this.close();
			},
			
			
			// 修改属性名的方法
			renameKeys(obj, keyMap) {
				return Object.keys(obj).reduce((acc, key) => {
					const newKey = keyMap[key] || key;
					acc[newKey] = obj[key];
					return acc;
				}, {});
			},
			//更新规格参数
			otherFun(productAttrParam) {
				console.log('productAttrParam', productAttrParam)
				if (productAttrParam) {
					//添加编辑规格参数
					if (productAttrParam.index == undefined && productAttrParam.type == "add") { //添加
						this.skuArr.push(productAttrParam.data);
					} else { //编辑
						for (let i = 0; i < this.rawSkuArr.length; i++) {
							if (this.rawSkuArr[i].id == productAttrParam.data.id) {
								// 检查指定属性在两个对象之间的值是否不同
								if (this.rawSkuArr[i].sku !== productAttrParam.data.sku || this.rawSkuArr[i].specUnit !==
									productAttrParam.data.specUnit || this.rawSkuArr[i].image !== productAttrParam.data
									.image) {
									productAttrParam.data.sign = 0; // 如果属性值不同，给 obj2 添加修改标识
								} else {
									productAttrParam.data.sign = 3; // 如果属性值相同，确保修改标识为 false
								}
							}
						};
						this.skuArr.splice(productAttrParam.index, 1, productAttrParam.data)
					}
				}
			},


			//提交物资
			submitProduct() {
				// 更新商品标识
				let isUpdate = parseFloat(this.id) > 0;
				// 校验数据
				let that = this;
				this.$refs.uForm.validate().then(res => {
					uni.$u.toast('1校验通过');
					//规格参数,规格属性,商品简介,运费模板，保障服务，商品详情*
					if (
						that.fileList1.length == 0
					) {
						uni.$u.toast('请上传封面图！');
						return;
					} else if (that.fileList2.length == 0) {
						uni.$u.toast('请上传轮播图片！');
						return;
					}
					if (
						that.fileList1.length == 0 ||
						that.fileList2.length == 0 ||
						// that.keywords.length == 0 ||
						Object.keys(that.specParamMap).length == 0 ||
						that.skuArr.length == 0
						// ||
						// that.formModel.productDetail.intro == null || that.formModel.productDetail.intro.length ==
						// 0
						// ||
						// that.selectTemplatesIndex == null
						// ||that.guaranteeItems.length == 0
					) {
						uni.$u.toast('请填写完整商品信息！');
						return;
					}
					uni.$u.toast('2校验通过');
					// 同步表单数据
					that.getFormValue();
					// 提交表单
					uni.$u.toast('3提交表单');
					if (this.deleteData.length) {
						for (let item of this.deleteData) {
							this.skuArr.push(item); // 添加被删除的商品，带回
						}
					}
					that.loading = true;
					// console.log('that.formModel.productDetail',that.formModel.productDetail)
					let api = isUpdate ? productUpdateApi : productCreateApi;
					uni.showLoading({
						title: '保存中'
					});
					api(that.formModel.productDetail).then(res => {
							if (res.code == 200) {
								uni.$u.toast('保存成功！');
								//关闭当前页面
								setTimeout(() => {
									uni.navigateBack()
								}, 500);
								that.loading = false;
							} else {
								console.log(res.msg);
								uni.$u.toast('保存失败！');

							}
						})
						.catch((res) => {
							console.log(res);
							uni.$u.toast('保存失败！' + res);
							that.loading = false;
						})

				}).catch(errors => {
					console.log("submitProduct error", errors);
					uni.$u.toast('请填写完整商品信息！');
				})
			},

			//获取表单需要的值
			getFormValue() {
				let product = this.formModel.productDetail;
				product.image = this.fileList1[0].url;
				product.sliderImage = JSON.stringify(this.fileList2.map(item => item.url));
				// product.keyword = this.keywords.join(',');
				if (this.specParamMap.isShelfLife == '无') {
					this.specParamMap.isShelfLife = '99年'
				};
				product.specParam = JSON.stringify(this.specParamMap);
				// product.tempId = this.shippingTemplatesList[this.selectTemplatesIndex].id;
				// const guaranteeIdsList = this.guaranteeItems.map(obj => obj.id);
				// product.guaranteeIds = guaranteeIdsList.join(',');
				if (product.id == undefined) {
					this.getInformation();
					// console.log('详细信息保质期')
				}

				// 同步 规格信息
				product.specType = true; //设置多规格
				// --------
				// attr | attrValue 
				// 验证是添加还是更新
				let attr = product.attr;
				let attrValuesList = [];
				// 校验skuArr和attrValue是否一个对象
				product.attrValue = this.skuArr;
				if (attr.length == 1) {
					this.attrKey = attr[0].attrName;
				};
				for (let s of this.skuArr) {
					let av = JSON.parse(s.attrValue);
					attrValuesList.push(av[this.attrKey]);
				};
				let attrValues = attrValuesList.join(',');
				if (attr.length == 0) {
					attr.push({
						attrName: this.attrKey,
						attrValues: attrValues
					});
				} else if (attr.length == 1) {
					attr[0].attrValues = attrValues;
				} else {
					attr = attr;
				};

				this.$set(this.formModel, 'productDetail', product);
			},
			// 过滤数据，将详细信息保质期等内容，放入attrValue中，
			getInformation() {
				let InfoParam = {};
				if (this.productInfoParam == '' || this.productInfoParam == undefined) {
					let newObj = {};
					const keyMap = {
						国产出口: 'isDomestic',
						运输方式: 'modeOfTransport',
						贮存方式: 'storageMode',
						保质期: 'isShelfLife',
						商品包装标注工厂地址: 'factoryLabelAddress',
						商品包装标准工厂名称: 'factoryLabelName',
						食材标签: 'foodLabels',
						商品外包装名称: 'foodOuterPack',
						备忘SKU条码: 'skuNoteBarcode',
						商品包装标注产地: 'addressNode',
						// 生产日期: 'manufactureDate',
					};
					newObj = this.renameKeys(this.specParamMap, keyMap);
					if (newObj.isShelfLife != '无') {
						const {
							shelfLifeNumber,
							shelfLifeUnit
						} = this.separateDigitsAndCharactersInString(newObj.isShelfLife);
						newObj.shelfLifeNumber = shelfLifeNumber;
						newObj.shelfLifeUnit = shelfLifeUnit;
						newObj.isShelfLife = '1'
					} else {
						newObj.isShelfLife = '0'
					};
					InfoParam = newObj;
				} else {
					InfoParam = this.productInfoParam;
				}
				if (InfoParam.isShelfLife == "无" || InfoParam.isShelfLife == '0') {
					InfoParam.isShelfLife = '0';
				} else {
					InfoParam.isShelfLife = '1';
				};
				let infoProduct = {
					isShelfLife: InfoParam.isShelfLife,
					shelfLifeNumber: InfoParam.shelfLifeNumber,
					shelfLifeUnit: InfoParam.shelfLifeUnit,
					modeOfTransport: InfoParam.modeOfTransport,
					storageMode: InfoParam.storageMode
					// manufactureDate: InfoParam.manufactureDate
				};
				let modifiedArray = this.skuArr.map(item => {
					return {
						...item,
						specUnit: JSON.stringify(Object.assign(JSON.parse(item.specUnit), infoProduct))
					}
				})
				this.skuArr = modifiedArray;
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url);
					if (result == null) {
						uni.showToast({
							title: "上传失败",
							icon: "none",
						})
						this.deletePic(event.index, 1);
						break;
					}
					let newStatus = {
						status: 'success',
						message: '上传成功',
						url: result,
					}
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, newStatus))
					fileListLen++
				}
			},
			uploadFilePromise(filePath) {
				return this.$util.uploadFilePromise(filePath, {
					url: 'upload/image',
					name: "multipart", //固定 multipart
					model: "product", //模块 用户user,商品product,微信wechat,news文章
					pid: 1, //分类ID 0编辑器,1商品图片,2拼团图片,3砍价图片,4秒杀图片,5文章图片,6组合数据图,7前台用户,8微信系列
					count: 1
				});
			},
			separateDigitsAndCharactersInString(str) {
				const matches = str.match(/(\d+)(\D+)/);
				if (matches && matches.length === 3) {
					const shelfLifeNumber = matches[1];
					const shelfLifeUnit = matches[2];
					return {
						shelfLifeNumber,
						shelfLifeUnit
					};
				} else {
					// 如果无法匹配到数字和字符，则返回原始字符串
					return {
						shelfLifeNumber: str,
						shelfLifeUnit: ''
					};
				}
			},
			
			
			// 物资类型
			openCategoryClass() {
				this.showGroupCategory = true;
			},
			toGoodsClass(item) {
				this.goPage(`/pages/product/productGoodsClass/productGoodsClass?data=${item}`)
			},
			toCategoryBrand(item) {
				this.goPage(`/pages/categoryTable/categoryBrand/categoryBrand?data=${item}`)
			},
			goMenually(type) {
				this.goPage(`/pages/materials/menuallyCreatedSpec/menuallyCreatedSpec?type=${type}`);
				this.showGroupSpec = false;
			},
			goPage(url, success) {
				uni.navigateTo({
					animationType: animationType.type,
					animationDuration: animationType.duration,
					url,
					success: success
				})
			},
			// ------------------

			//查询所有保障服务
			async getShippingTemplatesList() {
				let res = await shippingTemplatesList();
				if (res.code == 200) {
					this.shippingTemplatesList = res.data.list;
				}
			},


			//选择更改运费模板
			selectTemplatesChange(e) {
				this.selectTemplatesIndex = e.detail.value
				this.formModel.productDetail.tempId = this.shippingTemplatesList[e.detail.value].id;
			},
			//初始化商品选择的模板
			initSelectTemplates() {
				if (this.formModel.productDetail.tempId == null) {
					return;
				}
				for (var i = 0; i < this.shippingTemplatesList.length; i++) {
					if (this.shippingTemplatesList[i].id == this.formModel.productDetail.tempId) {
						this.selectTemplatesIndex = i;
					}
				}
			},



			//-----
			//查询平台端商品分类缓存树
			async getCategoryTree() {
				let res = await categoryApi();
				let that = this;
				if (res.code == 200) {
					// this.categoryTree = res.data;
					const result = [];
					for (const item1 of res.data) {
						for (const item2 of item1.childList) {
							for (const item3 of item2.childList) {
								result.push(item3);
							}
						}
					}
					this.categoryTree = result;
				}
			},


			//---
			//填出提添加参数框
			showAddParam(type) {
				this.addParamDrawer.type = type;
				this.addParamDrawer.title = type == 1 ? "关键字" : "规格参数";
				this.addParamDrawer.show = true;
			},
			addParamClick() {
				let name = this.addParamDrawer.name;
				let value = this.addParamDrawer.value;
				if (name.length == 0) {
					this.$refs.uToast.show({
						message: "名称不能为空",
					});
					return;
				}
				if (this.addParamDrawer.type == 1) {
					//添加关键字
					if (this.keywords.includes(name)) {
						this.$refs.uToast.show({
							message: "重复添加",
						});
						return;
					}
					this.keywords.push(name);
				} else {
					//添加规格参数
					if (value.length == 0) {
						this.$refs.uToast.show({
							message: "内容不能为空",
						});
						return;
					}
					this.specParamMap[name] = value;
				}

				this.addParamDrawer.name = "";
				this.addParamDrawer.value = "";
				this.addParamDrawer.show = false;
			},
		}
	}
</script>

<style lang="scss">
	.bg_color {
		@include main_bg_color(theme);
	}

	.plain_bgColor {
		@include main_color(theme);
		@include main_bg_rgba_color(theme, 0.05);
		border: 1rpx solid;
	}

	.card {
		margin: 0 20rpx 20rpx 20rpx;
		background-color: #fff;
		border-radius: 20rpx;


	}

	.product-title {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 20rpx;
		margin-top: 10rpx;
	}

	.ensure {
		width: 100%;
		background-color: #fff;
		padding-bottom: 22rpx;
		padding-bottom: calc(22rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		padding-bottom: calc(22rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/

		.title {
			font-size: 36rpx;
			color: #282828;
			text-align: center;
			margin: 38rpx 0 36rpx 0;
			position: relative;

			.iconfont {
				position: absolute;
				right: 30rpx;
				top: 0;
				font-size: 36rpx;
			}

			.iconfontRight {
				position: absolute;
				right: 30rpx;
				top: 0;
				font-size: 30rpx;
				@include main_color(theme);
			}
		}

		.titleRight {
			font-size: 30rpx;
			font-weight: bold;
			color: #282828;
			text-align: center;
			margin: 20rpx 10rpx 36rpx 0;
			position: relative;
			padding-bottom: 30rpx;
			border-bottom: 2rpx solid #f0edf0;

			.iconfont {
				position: absolute;
				right: 0;
				top: 0;
				font-size: 30rpx;
			}
		}
	}

	/* 二级分类 */
	.secondary {
		background-color: #fffeff;
		// height: 100%;
		min-height: 845rpx;
		height: 700rpx;
		// .carousel {
		// 	height: 200rpx;
		// 	margin: 0 30rpx 20rpx;
		// 	border-radius: 4rpx;
		// 	overflow: hidden;
		// }

		.panel {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 96rpx;
			font-size: 26rpx;
			color: #595c63;
			position: relative;

			&::after {
				content: '';
				position: absolute;
				left: 42rpx;
				bottom: 0;
				width: 330rpx;
				border-top: 1rpx solid #e3e4e7;
			}
		}

		.active {
			background-color: #fffeff;
			@include main_color(theme);

			// &::before {
			// 	content: '';
			// 	position: absolute;
			// 	left: 0;
			// 	top: 0;
			// 	width: 8rpx;
			// 	height: 100%;
			// 	@include main_bg_color(theme);
			// }
		}
	}

	/deep/ .tui-drawer-container_bottom {
		border-radius: 16rpx 16rpx 0 0;
	}

	.sku-select {
		.flex-text {
			margin: 8rpx 8rpx;
			background-color: #f7f7f7;
			line-height: 62rpx;
			text-align: center;
			color: #777;
			padding: 16rpx 34rpx;
			font-size: 26rpx;
			font-weight: bolder;
			border-radius: 10rpx;
			border: 1rpx solid #FFF;
		}

		.right-class-active {
			@include main_color(theme);
			@include main_bg_rgba_color(theme, 0.05);
			border: 1rpx solid;
		}
	}

	.left-fill-card {
		animation-name: slideInLeft;
		animation-duration: 0.5s;
		animation-fill-mode: both;
	}

	/* 定义动画效果 */
	@keyframes slideInLeft {
		from {
			transform: translateX(-100%);
			opacity: 0;
		}

		to {
			transform: translateX(0);
			opacity: 1;
		}
	}

	.right-fill-card {
		animation-name: slideInRight;
		animation-duration: 0.5s;
		animation-fill-mode: both;
	}

	@keyframes slideInRight {
		from {
			transform: translateX(100%);
			opacity: 0;
		}

		to {
			transform: translateX(0);
			opacity: 1;
		}
	}

</style>